<template>
  <view
    class="page-nav"
    :class="{'page-nav-white':useToggle && !opacity}"
    :style="navBackgroundStyle"
  >
    <!-- 导航栏主体 -->
    <view
      class="page-nav-navbar"
      :style="{backgroundColor: navBackgroundColor }"
    >
      <!-- 状态栏 -->
      <view
        class="page-nav-statusbar"
        :style="{height: statusBarHeight + 'px'}"
      />
      <!-- 标题栏 -->
      <view
        class="page-nav-titlebar"
        :style="{height: titleBarHeight + 'px', paddingRight:titleBarPadding + 'px', paddingLeft: space + 'px'}"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { formatStyles } from '@/utils'
export default {
  name: 'TitleBar',
  props: {
    // 导航栏背景色
    cover: {
      default: ''
    },
    // 导航栏背景色
    bgcolor: String,
    // 标题颜色
    titleColor: {
      type: String,
      default: '#FFFFFF'
    },
    // 标题文字
    title: String,
    // 标题文字
    toggleTitle: String,
    // 是否显示后退按钮
    backVisible: {
      type: Boolean,
      default: false
    },
    // home按钮的路径
    homePath: {
      type: String,
      default: '/pages/index/main'
    },
    backPath: {
      type: String,
      default: '/pages/index/main'
    },
    homeIshide: {
      type: Boolean,
      default: false
    },
    useToggle: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      titleBarPadding: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      space: 10,
      spaceTop: 10,
      platform: '',
      system: '',
      panelBackground: '',
      titleText: '',
      opacity: 0,
      //
      systemData: {},
      menuButtonObject: {}
    }
  },
  onLoad () {
    this.menuButtonObject = mpvue.getStorageSync('menuButtonObject')
    this.systemData = mpvue.getStorageSync('systemData')
    this.statusBarHeight = this.systemData.statusBarHeight
    this.space = this.systemData.windowWidth - this.menuButtonObject.right
    this.titleBarPadding = this.menuButtonObject.width + this.space * 2

    console.log(this.titleBarPadding)
    console.log(this.menuButtonObject)
    let platformReg = /ios/i
    if (platformReg.test(this.systemData.platform)) {
      this.titleBarHeight = 44
    } else {
      this.titleBarHeight = 48
    }
    this.navBarHeight = this.statusBarHeight + this.titleBarHeight
  },
  watch: {
    opacity (v, ov) {
      this.toggleTheme()
    }
  },
  computed: {
    navBackgroundStyle () {
      let styles = {}
      if (this.cover) {
        styles.backgroundImage = `url('` + this.cover + `')`
      }
      if (this.bgcolor) {
        styles.backgroundColor = this.bgcolor
      }
      return formatStyles(styles)
    },
    navBackgroundColor () {
      return 'rgba(255,255,255,' + this.opacity + ')'
    }
  },
  mounted () {
    if (!this.useToggle) {
      this.titleText = this.title
    }
    if (this.cover) {
      this.panelBackground = `url('` + this.cover + `');`
    }
    this.toggleTheme()
  },
  methods: {
    toggleTheme () {
      if (!this.useToggle) {
        return
      }
      if (this.opacity) {
        wx.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor: '#ffffff',
          animation: {
            duration: 200,
            timingFunc: 'linear'
          }
        })
        this.titleText = this.title
      } else {
        wx.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#ffffff',
          animation: {
            duration: 200,
            timingFunc: 'linear'
          }
        })
        this.titleText = ''
      }
    }
  },
  /**
   * 监听用户滑动页面事件--返回页面在垂直方向已滚动的距离（单位px）
   */
  onPageScroll (e) {
    if (this.useToggle) {
      if (e.scrollTop >= this.statusBarHeight + 100) {
        this.opacity = 1
      } else {
        this.opacity = 0
      }
    }
  }
}
</script>